<template>
  <div class="page">
    <div class="s-search p20">
      <el-form
        :model="alone.searchForm.data"
        status-icon
        ref="ruleForm"
        :inline="true"
        class="demo-ruleForm"
      >
        <el-form-item>
          <el-cascader
            v-model="alone.searchForm.data.intentionPlatform"
            :props="orgCascaderCp.config.props"
            :options="platformSupAjax.data"
            placeholder="请选择意向平台搜索"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="alone.searchForm.data.appraiseType"
            placeholder="请选择是否已经评价"
          >
            <el-option label="未评价" value="1"> </el-option>
            <el-option label="已评价" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="alone.searchForm.data.tenantType"
            placeholder="请选择主播公司来源"
          >
            <el-option label="所有公司" value="3"> </el-option>
            <el-option label="当前公司" value="1"> </el-option>
            <el-option label="其他公司" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="rSubmitSearchForm">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="c-main p20">
      <div class="clearfix">
        <div class="fl">总共：{{ pageAjax.paging.total }} 条</div>
      </div>
      <div class="c-section">
        <div class="c-body">
          <el-table :data="pageAjax.data" stripe style="width: 100%">
            <el-table-column label="头像">
              <template slot-scope="scope">
                <img class="c-avatar" :src="scope.row.avatarUrl" alt="" />
              </template>
            </el-table-column>
            <el-table-column prop="nickName" label="昵称">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.nickName }}
                  <span v-if="scope.row.hasLiveExperience" class="text-warning"
                    >(有直播经验)</span
                  >
                  <span v-else>(无直播经验)</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="招募评价" width="205px">
              <template slot-scope="scope" v-if="scope.row.appraiseView">
                外貌评价:<el-rate
                  disabled
                  style="display:inline-block"
                  v-model="scope.row.appraiseView.starLooks"
                ></el-rate
                ><br />
                才艺评价:<el-rate
                  disabled
                  style="display:inline-block"
                  v-model="scope.row.appraiseView.starSkills"
                ></el-rate
                ><br />
                口才评价:<el-rate
                  disabled
                  style="display:inline-block"
                  v-model="scope.row.appraiseView.starEloquence"
                ></el-rate>
                <br />
                <span v-if="scope.row.appraiseView.otherOpinion">
                  其他:{{ scope.row.appraiseView.otherOpinion }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="期望待遇">
              <template slot-scope="scope">
                <div class="">
                  {{
                    getSalaryStr(
                      scope.row.expectedBaseSalary,
                      scope.row.expectedBottomGuard,
                      scope.row.expectedSigningBonus,
                      scope.row.expectedOther
                    ) || "无"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="是否携带设备">
              <template slot-scope="scope">
                <div class="">
                  {{ (scope.row.deviceOwn ? "是" : "否") || "无" }}
                </div>
              </template>
            </el-table-column>

            <el-table-column label="意向平台">
              <template slot-scope="scope">
                <div class="text-abbreviate">
                  {{ scope.row.intentionPlatform || "无" }}
                </div>
              </template>
            </el-table-column>

            <!-- <el-table-column label="想签运营数">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.intentionCount || 0 }}
                </div>
              </template>
            </el-table-column> -->
            <el-table-column label="所属招募">
              <template slot-scope="scope">
                <div class="">
                  {{
                    scope.row.recruit && scope.row.recruit.nickName
                      ? scope.row.recruit.corporationName +
                        "-" +
                        scope.row.recruit.departmentName +
                        "-" +
                        scope.row.recruit.nickName
                      : "无"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="招募联系方式">
              <template slot-scope="scope">
                <div v-if="scope.row.recruit">
                  <div v-if="scope.row.recruit.phone">
                    联系电话：{{ scope.row.recruit.phone }}
                  </div>
                  <div v-if="scope.row.recruit.wxNo">
                    微信号：{{ scope.row.recruit.wxNo }}
                  </div>
                </div>
                <div v-else>无</div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  v-hasAuth:agent_detail
                  @click="navToDetail(scope.row.anchorId)"
                  >详情</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-hasAuth:agent_bindActor
                  @click="rBindActorByAgent(scope.row.anchorId)"
                  >绑定</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-hasAuth:agent_signOffer
                  @click="rGetOffer(scope.row.anchorId)"
                  >我的签约意愿</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-hasAuth:agent_signOfferList
                  @click="rAgentWish(scope.row.anchorId)"
                  >主播签约意愿详情</el-button
                >

                <span
                  v-hasAuth:agent_detail-agent_signOffer-agent_signOfferList-agent_bindActor.invert
                  >—</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="c-footer">
          <div class="c-pagination">
            <el-pagination
              layout="prev, pager, next"
              @current-change="rPagingChange"
              @prev-click="rPagingChange"
              @next-click="rPagingChange"
              :current-page="pageAjax.paging.current"
              :total="pageAjax.paging.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- offerDrawerCp -->
    <el-drawer
      :title="offerDrawerCp.config.title"
      :visible.sync="offerDrawerCp.config.visible"
      :direction="offerDrawerCp.config.direction"
      :size="offerDrawerCp.config.size"
      @close="rCloseOfferDrawerCp"
    >
      <div class="f-record">
        <div class="c-content">
          <el-row class="">
            <el-col :span="14" :offset="5">
              <el-form ref="record" label-width="120px">
                <el-form-item label="是否匿名：">
                  <el-switch
                    v-model="offerAjax.data.isAnonymous"
                    :disabled="cannotFillOutOffer"
                    active-color="#13ce66"
                    :active-value="1"
                    :inactive-value="0"
                    active-text="是"
                    inactive-text="否"
                  >
                  </el-switch>
                </el-form-item>
                <el-form-item label="签约意愿：">
                  <el-radio-group
                    v-model="offerAjax.data.signIntention"
                    :disabled="cannotFillOutOffer"
                  >
                    <el-radio-button :label="1">想签</el-radio-button>
                    <el-radio-button :label="0">不想签</el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="可给待遇："
                  v-if="offerAjax.data.signIntention"
                >
                  <el-input
                    v-model="offerAjax.data.provideSalary"
                    :disabled="cannotFillOutOffer"
                  ></el-input>
                </el-form-item>
                <el-form-item label="外貌评价：">
                  <el-rate
                    v-model="offerAjax.data.starLooks"
                    :disabled="cannotFillOutOffer"
                    class="mt10"
                  ></el-rate>
                </el-form-item>
                <el-form-item label="才艺评价：">
                  <el-rate
                    v-model="offerAjax.data.starSkills"
                    :disabled="cannotFillOutOffer"
                    class="mt10"
                  ></el-rate>
                </el-form-item>
                <el-form-item label="口才评价：">
                  <el-rate
                    v-model="offerAjax.data.starEloquence"
                    :disabled="cannotFillOutOffer"
                    class="mt10"
                  ></el-rate>
                </el-form-item>
                <el-form-item label="其他意见/要求：">
                  <el-input
                    type="textarea"
                    :disabled="cannotFillOutOffer"
                    v-model="offerAjax.data.otherOpinion"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="text"
                    @click="rTriggerEditOffer"
                    v-if="cannotFillOutOffer"
                    >编辑</el-button
                  >
                  <el-button type="primary" @click="rSubmitOfferForm" v-else
                    >提交</el-button
                  >
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-drawer>
    <!-- agentWishCp -->
    <el-drawer
      :title="agentWishDrawerCp.config.title"
      :visible.sync="agentWishDrawerCp.config.visible"
      :direction="agentWishDrawerCp.config.direction"
      :size="agentWishDrawerCp.config.size"
    >
      <div class="f-agentWish">
        <div class="c-content" v-infinite-scroll="rGetMoreAgentWish">
          <el-row class="">
            <el-col :span="14" :offset="5">
              <div class="c-main">
                <el-card
                  class="c-card"
                  v-if="agentWishAjax.data && agentWishAjax.data.length"
                >
                  <div
                    class="c-item"
                    v-for="item in agentWishAjax.data"
                    :key="item.id"
                  >
                    <div class="c-UserInfo">
                      <div class="c-avatar">
                        <img :src="item.defaultAvatarUrl" alt="" />
                      </div>
                      <div class="c-nameInfo">
                        <p class="c-name">{{ item.operatorName }}</p>
                        <p class="c-station">
                          {{ item.operatorNick + " - " + item.operatorPlat }}
                        </p>
                      </div>
                      <!-- <div class="c-copyBtn">
                        复制微信
                      </div> -->
                    </div>
                    <div class="c-bid mt10">
                      <img
                        :src="
                          '@/assets/images/' +
                            (item.provideSalary ? 'y' : 'n') +
                            '.png'
                        "
                        alt=""
                      />
                      <span v-if="item.provideSalary"
                        >可给待遇：{{ item.provideSalary }}</span
                      >
                    </div>
                    <div class="c-appraise mt10" v-if="item.starLooks">
                      <el-form label-width="80px">
                        <el-form-item label="外貌评价">
                          <el-rate
                            :value="item.starLooks"
                            disabled
                            class="mt10"
                          ></el-rate>
                        </el-form-item>
                        <el-form-item label="才艺评价">
                          <el-rate
                            :value="item.starSkills"
                            disabled
                            class="mt10"
                          ></el-rate>
                        </el-form-item>
                        <el-form-item label="口才评价">
                          <el-rate
                            :value="item.starEloquence"
                            disabled
                            class="mt10"
                          ></el-rate>
                        </el-form-item>
                      </el-form>
                    </div>
                    <div class="c-other mt10">
                      其他意见：{{ item.otherOpinion || "无" }}
                    </div>
                  </div>
                </el-card>
                <div class="p20 tc" v-else>
                  仅支持显示本部门的意愿数据
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  getHallList,
  getAgentWish,
  addOffer,
  getOffer,
  bindActorByAgent
} from "@/api/actor.js";
// import { getOffspringnTree } from "@/assets/js/util.js";
import { mixin } from "@/components/mixin/getSalaryStr.js";
import _ from "lodash";

export default {
  name: "agent_hallList",
  mixins: [mixin],
  data: () => ({
    pageAjax: {
      btnDisabled: false,
      btnLoading: false,
      loading: false,
      lock: false,
      paging: {
        pages: 1, // 总页数
        current: 0, // 当前页
        total: 1, // 总数量
        pageSize: 10 // 每页数量
      },
      data: []
    },
    // 平台列表
    platformSupAjax: {
      loading: false,
      data: [],
      orginData: []
    },
    agentWishAjax: {
      loading: false,
      lock: false,
      paging: {
        pages: 1, // 总页数
        current: 0, // 当前页
        total: 1, // 总数量
        pageSize: 10 // 每页数量
      },
      data: []
    },
    offerAjax: {
      loading: false,
      lock: false,
      data: {
        hasAppraised: 0,
        isAnonymous: 1,
        signIntention: 1,
        provideSalary: "",
        starEloquence: 1,
        starLooks: 1,
        starSkills: 1
      }
    },
    alone: {
      searchForm: {
        loading: false,
        data: {
          appraiseType: "",
          intentionPlatform: 0,
          tenantType: "3"
        }
      },
      offerIsEdit: false
    },
    orgCascaderCp: {
      config: {
        props: {
          value: "id",
          label: "name",
          checkStrictly: true,
          emitPath: false
        }
      }
    },
    agentWishDrawerCp: {
      loading: false,
      config: {
        title: "",
        visible: false,
        direction: "ttb",
        size: "75%"
      },
      data: {
        anchorId: ""
      }
    },

    offerDrawerCp: {
      loading: false,
      config: {
        title: "",
        visible: false,
        direction: "ttb",
        size: "75%"
      },
      data: {}
    }
  }),
  computed: {
    // show/hide is如offerIsEdit has disabled can
    cannotFillOutOffer: function() {
      // 没值，默认可以填写
      if (!this.offerAjax.data.hasAppraised) {
        return false;
      }
      // 有值，点击编辑才可以
      if (this.offerAjax.data.hasAppraised && this.alone.offerIsEdit) {
        return false;
      }
      return true;
    }
  },
  created() {
    let _that = this;
    _that.getOrgData();
    _that.getPageData();
  },
  methods: {
    rSubmitSearchForm() {
      let _that = this;
      if (_that.pageAjax.loading) {
        return;
      }
      _that.pageAjax.lock = false;
      _that.pageAjax.paging.current = 0;
      _that.getPageData();
    },
    rPagingChange(e) {
      let _that = this;
      _that.pageAjax.paging.current = e - 1;
      _that.getPageData();
    },
    /* 签约意愿列表 */
    rAgentWish(anchorId) {
      let _that = this;
      _that.agentWishDrawerCp.config.visible = true;
      _that.agentWishDrawerCp.data.anchorId = anchorId;

      _that.agentWishAjax.lock = false;
      _that.agentWishAjax.data = [];
      _that.agentWishAjax.paging.current = 0;

      _that.getAgentWishData();
    },
    rGetMoreAgentWish() {
      let _that = this;
      if (_that.agentWishAjax.lock || _that.agentWishAjax.loading) {
        return;
      }
      _that.getAgentWishData();
    },
    /* 我的签约意愿 */
    rGetOffer(anchorId) {
      let _that = this;
      _that.offerDrawerCp.config.visible = true;
      _that.offerDrawerCp.data.anchorId = anchorId;

      _that.getOfferData();
    },
    rTriggerEditOffer() {
      let _that = this;
      _that.alone.offerIsEdit = true;
    },
    rSubmitOfferForm() {
      let _that = this;
      let anchorId = _that.offerDrawerCp.data.anchorId;
      let offerAjaxData = _.cloneDeep(_that.offerAjax.data);
      if (_that.offerAjax.loading) {
        return;
      }
      offerAjaxData.hasAppraised = 1;
      if (offerAjaxData.signIntention) {
        if (!offerAjaxData.provideSalary) {
          _that.$message.error("请填写可给待遇");
          return;
        }
      }

      _that.offerAjax.loading = true;
      offerAjaxData.anchorId = anchorId;
      addOffer(offerAjaxData)
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.$message.success(respData.msg || "修改成功");
            _that.offerDrawerCp.config.visible = false;

            _that.pageAjax.paging.current =
              _that.pageAjax.paging.current > 0
                ? _that.pageAjax.paging.current - 1
                : 0;
            _that.resetOfferAjaxData();
          } else {
            _that.$message.error(respData.msg || "修改失败");
          }
        })
        .finally(() => {
          _that.offerAjax.loading = false;
        });
    },
    rCloseOfferDrawerCp() {
      this.alone.offerIsEdit = false;
      this.resetOfferAjaxData();
    },
    rBindActorByAgent(id) {
      let _that = this;
      this.$confirm("你确定要绑定此主播?", "绑定提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          bindActorByAgent({ anchorId: id }).then(resp => {
            let respData = resp.data || {};
            if (respData.code === _that.STATUS.success[0]) {
              _that.$message.success(respData.msg || "绑定成功");
              _that.pageAjax.paging.current =
                _that.pageAjax.paging.current > 0
                  ? _that.pageAjax.paging.current - 1
                  : 0;
              _that.getPageData();
            } else {
              _that.$message.error(respData.msg || "绑定失败");
            }
          });
        })
        .catch(() => {});
    },
    resetOfferAjaxData() {
      this.offerAjax.data = {
        hasAppraised: 0,
        isAnonymous: 1,
        signIntention: 1,
        provideSalary: "",
        starEloquence: 1,
        starLooks: 1,
        starSkills: 1
      };
    },
    getPageData() {
      let _that = this;
      let searchForm = _.cloneDeep(_that.alone.searchForm);
      let pageAjax = _that.pageAjax;

      if (pageAjax.loading || pageAjax.lock) {
        return;
      }

      let data = { ...searchForm.data };
      data.pageNo = _that.pageAjax.paging.current + 1;
      _that.pageAjax.loading = true;
      getHallList({ params: data })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.pageAjax.data = respData.data.list;
            _that.pageAjax.paging = {
              pages: respData.data.pagination.pages,
              current: respData.data.pagination.current,
              total: respData.data.pagination.total,
              pageSize: respData.data.pagination.pageSize
            };
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
          _that.alone.searchForm.loading = false;
        });
    },
    getOfferData() {
      let _that = this;
      let offerAjax = _that.offerAjax;
      let anchorId = _that.offerDrawerCp.data.anchorId;

      if (offerAjax.loading || offerAjax.lock) {
        return;
      }

      _that.offerAjax.loading = true;
      getOffer({ params: { anchorId: anchorId } })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            if (respData.data.hasAppraised) {
              _that.offerAjax.data = respData.data;
            }
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.offerAjax.loading = false;
        });
    },
    getAgentWishData() {
      let _that = this;
      let agentWishAjax = _that.agentWishAjax;
      let anchorId = _that.agentWishDrawerCp.data.anchorId;

      if (agentWishAjax.loading || agentWishAjax.lock) {
        return;
      }

      let pageNo = _that.agentWishAjax.paging.current + 1;
      let pageSize = _that.agentWishAjax.paging.pageSize;
      _that.agentWishAjax.loading = true;
      getAgentWish({
        params: { anchorId: anchorId, pageNo: pageNo, pageSize: pageSize }
      })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            if (!respData.data.list.length) {
              _that.agentWishAjax.lock = true;
            }
            _that.agentWishAjax.data = _that.agentWishAjax.data.concat(
              respData.data.list
            );
            _that.agentWishAjax.paging = {
              pages: respData.data.pagination.pages,
              current: respData.data.pagination.current,
              total: respData.data.pagination.total,
              pageSize: 10
            };
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.agentWishAjax.loading = false;
        });
    },
    getOrgData() {
      let _that = this;
      return _that.$store.dispatch("getPlatformList").then(() => {
        let arr =
          _.cloneDeep(
            _that.$store.getters.wantPlatformListOffspringnTreeData()
          ) || [];

        _that.platformSupAjax.data = arr;
      });
    },
    navToDetail(id) {
      this.$router.push({
        name: "agent_detail",
        query: {
          anchorId: id
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-aside {
    .btn {
      margin-right: 20px;
    }
    .diy-uploadBtn {
      margin-right: 20px;
    }
  }
  .c-main {
    margin-top: 20px;
    .c-avatar {
      display: block;
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }
  .f-record {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 50px;
    bottom: 0;
    .c-content {
      height: 100%;
      padding-bottom: 20px;
      overflow: auto;
    }
  }

  .f-agentWish {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    .c-content {
      height: 100%;
      padding-bottom: 20px;
      overflow: auto;
    }
    .c-card {
      .c-item {
        padding-bottom: 20px;
        border-top: 1px solid #f5f7fa;
      }
      .el-form-item {
        margin-bottom: 0;
      }
      .c-UserInfo {
        position: relative;
        overflow: hidden;
        line-height: 25px;
      }
      .c-avatar {
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .c-nameInfo {
        float: left;
        margin-left: 20px;
      }
      .c-copyBtn {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        border: 1px solid #eee;
        padding: 10px 20px;
        border-radius: 20px;
      }
      .c-bid {
        overflow: hidden;
        line-height: 30px;
        img {
          float: left;
          width: 30px;
          height: 30px;
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.page {
  .el-drawer__header {
    position: relative;
    z-index: 10;
  }
}
</style>
